<template>
  <div class="box">
    <el-card class="card-box">
      <div class="btn-css">
        <el-button type="primary" class="djlb-btn">等级列表</el-button>
        <el-button type="primary" class="tjdj-btn" @click="dialogVisible = true"
          ><i class="el-icon-plus"></i>添加等级</el-button
        >
      </div>

      <div class="table-css">
        <el-table
          :data="tableData"
          style="width: 100%"
          :row-class-name="tableRowClassName"
          border
          :header-cell-style="{ background: '#e4eaec', color: '#606266' }"
        >
          <el-table-column prop="date" label="等级名称" align="center">
          </el-table-column>
          <el-table-column prop="name" label="会员价格" align="center">
          </el-table-column>
          <el-table-column
            prop="address"
            label="一推荐人反佣比例"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="address"
            label="二推荐人反佣比例"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="address"
            label="三推荐人反佣比例"
            align="center"
          >
          </el-table-column>
          <el-table-column prop="address" label="权限描述" align="center">
          </el-table-column>
          <el-table-column prop="address" label="每日限制任务数" align="center">
          </el-table-column>
          <el-table-column prop="address" label="操作" align="center">
            <template>
              <el-button class="xiugai-btn">修改</el-button>
              <el-button class="shanchu-btn">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="fenye-css">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[100, 200, 300, 400]"
            :page-size="100"
            layout="total, sizes, prev, pager, next, jumper"
            :total="400"
            background
          >
          </el-pagination>
        </div>
      </div>
    </el-card>
    <el-dialog title="添加等级：" :visible.sync="dialogVisible" width="740px">
      <div class="dialog-div">
        <el-form ref="form" :model="form" label-width="150px">
          <el-form-item label="等级名称">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="会员价格">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="一级推荐人反佣比例">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="二级推荐人反佣比例">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="三级推荐人反佣比例">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="权限描述">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="每日限制任务数">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
        </el-form>
      </div>

      <div class="btn-css-dialog">
        <span slot="footer" class="dialog-footer">
          <el-button
            type="primary"
            @click="dialogVisible = false"
            class="tijiao-btn"
            >提交</el-button
          >
        </span>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  methods: {
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex === 1) {
        return "success-row";
      } else if (rowIndex === 3) {
        return "success-row";
      }
      return "";
    },
  },
  data() {
    return {
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "王小虎",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "王小虎",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "王小虎",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "王小虎",
        },
      ],
      dialogVisible: false,
      form: {
        name: "",
      },
    };
  },
};
</script>

<style lang="scss" scoped>
.box {
  .card-box {
    margin: 20px;
    .btn-css {
      display: flex;
      .djlb-btn {
        height: 35px;
        display: flex;
        align-items: center;
        background-color: #28acb8;
        border-color: #28acb8;
      }
      .tjdj-btn {
        height: 35px;
        display: flex;
        align-items: center;
        background-color: #2f71aa;
        border-color: #2f71aa;
      }
    }
    .table-css {
      margin-top: 20px;
      .xiugai-btn {
        height: 30px;
        line-height: 2px;
        background-color: #acbac2;
        border-color: #acbac2;
        color: #ffff;
      }
      .shanchu-btn {
        height: 30px;
        line-height: 2px;
        background-color: #acbac2;
        border-color: #acbac2;
        color: #ffff;
      }
      .fenye-css {
        margin-top: 20px;
        text-align: right;
      }
    }
  }
}
::v-deep .el-table .warning-row {
  background: oldlace;
}

::v-deep .el-table .success-row {
  background: #f1f7f9;
}

::v-deep .el-dialog__title {
  color: #3172aa;
  font-size: 16px;
  margin-left: 50px;
}
::v-deep .el-dialog__header {
  border-bottom: 1px solid #e8f0f6;
  padding-bottom: 20px;
  padding-top: 20px;
}
.dialog-div {
  margin-left: 43px;
  ::v-deep .el-input__inner {
    width: 480px;
    height: 30px;
  }
  ::v-deep .el-form-item__label {
    text-align: left;
  }
}
.btn-css-dialog {
  display: flex;
  justify-content: center;
  .tijiao-btn {
    height: 30px;
    display: flex;
    align-items: center;
    background-color: #2f71a9;
    border-color: #2f71a9;
  }
}
</style>
